<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="胡爱静">
    <title>订单</title>
    <style>
        body{
           margin: 0;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .top{
            width: 220px;
            display: flex;
            margin: 100px auto;
        }
        .top>li{
            width: 110px;
            border: 1px solid #666;
            text-align: center;
            padding: 10px 0; 
            position: relative;    
        }
        .top a{
            text-decoration: none;
            color: black;
        }
        .bottom-left,.bottom-right{
            position: absolute;
            left: -2px;
            top: 40px; 
             display: none; 
        }
        .bottom-left li,.bottom-right li{
            width: 110px;
            padding: 10px 0;
            border: 1px solid #666;
        }
        .footer{
            width: 60px;
            height: 30px;
            text-align: center; 
            margin: 50px auto;
            position: absolute;
            left: calc(50% - 30px);
        }
        .footer a{
            font-size: 20px;
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <ul class="top">
        <li class="left"><a href="javascript:;">销售订单</a>
          <ul class="bottom-left">
             <li><a href="javascript:;">销售1</a></li>
             <li><a href="javascript:;">销售2</a></li>
             <li><a href="javascript:;">销售3</a></li>
         </ul> 
        </li>
        <li class="right"><a href="javascript:;">消费订单</a>
           <ul class="bottom-right">
             <li><a href="javascript:;">订单1</a></li>
             <li><a href="javascript:;">订单2</a></li>
             <li><a href="javascript:;">订单3</a></li>
         </ul> 
        </li>
    </ul> 
    <div class="footer">
        <a href="javascript:;">00</a>
    </div>  

    <script src="jquery.js"></script>
</body>
</html>
<script>    
    $('.left').hover(function(){
      $('.bottom-left').show();

       $('.bottom-left>li').hover(function(){
           $(this).css('background-color','lightskyblue')
            .siblings().css('background-color','transparent');
       },function(){
          $(this).css('background-color','transparent');
        });

      },function(){
        $('.bottom-left').hide();
    });

    $('.bottom-left>li').on('click',function(){
        $('.footer').html($(this).html());
        
    });


    $('.right').hover(function(){
      $('.bottom-right').show();

       $('.bottom-right>li').hover(function(){
           $(this).css('background-color','lightskyblue')
            .siblings().css('background-color','transparent');
       },function(){
             $(this).css('background-color','transparent');
       });

    },function(){
        $('.bottom-right').hide();
    });
    
     $('.bottom-right>li').on('click',function(){
        $('.footer').html($(this).html());
    });




</script>